{extend name="layouts/cms"}

{block name='body-content'}

<button class="layui-btn layui-btn-normal"
        onclick="addArticle()">
    <i class="layui-icon">&#xe608;</i> 添加文章
</button>
<div class="layui-inline">
    <div class="layui-input-inline">
        <form class="form-search" action="{:url('cms/article/index')}" method="get">
            <input type="hidden" name="record_num" class="record_num" value="<?php echo $record_num; ?>">
            <input type="hidden" name="page_limit" class="page_limit" value="{$page_limit}">
            <input type="hidden" name="curr_page" class="curr_page" value="1">
            <input type="text" value="{$search}" name="str_search" placeholder="请输入标题"
                   class="layui-input search_input">
        </form>
    </div>
    <button class="layui-btn-warm btn-search-navMenu">
        <i class="layui-icon">&#xe615;</i>
    </button>
</div>

<table class="layui-table table-body" lay-even="" lay-skin="row">
    <colgroup>
        <col width="5%">
        <col width="20%">
        <col width="10%">
        <col width="30%">
        <col width="10%">
        <col width="10%">
        <col width="15%">
    </colgroup>
    <thead>
    <tr>
        <th>ID</th>
        <th>标题</th>
        <th>图片</th>
        <th>摘要</th>
        <th>更新时间</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="tbody-articles">
    {volist name="articles" id="vo"}
    <tr class="tr-article-{$vo['id']}">
        <td>{$vo['id']}</td>
        <td>《{$vo['title']}》</td>
        <td class="td-article">
            <img src="{$vo['picture']}" class="">
        </td>
        <td>
            <p class="p-article-abstract">{$vo['abstract']}</p>
        </td>
        <td>{$vo['updated_at']}</td>
        <td>{php} echo $vo['status_tip']{/php}</td>
        <td>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm"
                        onclick="editArticle('{$vo['id']}')">
                    <i class="layui-icon">&#xe642;</i>
                </button>
                <button class="layui-btn layui-btn-sm"
                        onclick="delArticle('{$vo['id']}')">
                    <i class="layui-icon">&#xe640;</i>
                </button>
            </div>
        </td>
    </tr>
    {/volist}
    </tbody>
</table>
<div id="demo2-1"></div>
{/block}

{block name='single-content'}
<script src="__CMS__/js/articles.js"></script>
<script src="__CMS__/js/moZhang.js"></script>
<script>
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;
        var page_limit = $(".page_limit").val();
        var record_num = $(".record_num").val();
        laypage.render({
            elem: 'demo2-1'
            , limit: page_limit
            , count: record_num
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数
                //首次不执行
                if (!first) {
                    //layer.msg(obj.curr);
                    ajaxOpForPage(obj.curr);
                }
            }
            , theme: '#FF5722'
        });
    });
</script>
<script>
    //根据菜单ID 删除菜单记录
    function delArticle(id) {
        var toUrl = "{:url('cms/article/edit',['id'=>'AID'])}";
        toUrl = toUrl.replace('AID', id);
        ToDelItem(id, toUrl, '.tr-article-' + id);
    }

    $(".btn-search-navMenu").on('click', function () {
        //var str_search = $(".search_input").val();
        $(".form-search").submit();
    });

    //添加导航菜单
    function addArticle() {
        var toUrl = "{:url('cms/article/add')}";
        ToOpenPopups(toUrl, '✚ 文章添加', '', '76%');
    }

    //根据菜单ID修改菜单信息
    function editArticle(id) {
        var toUrl = "{:url('cms/article/edit',['id'=>'AID'])}";
        toUrl = toUrl.replace('AID', id);
        ToOpenPopups(toUrl, '✎ 文章修改', '', '76%');
    }
    //通过ajax 获取分页数据
    function ajaxOpForPage(curr_page) {
        var toUrl = "{:url('cms/article/ajaxOpForPage')}";
        $(".curr_page").val(curr_page);
        var postData = $(".form-search").serialize();
        ToAjaxOpForPageArticles(toUrl, postData);
    }
</script>
{/block}